<template>
  <div class="shortcuts-container">
    <el-row>
      <h1 class="shortcuts-title">{{ $t('pageOverview.shortcuts') }}</h1>
    </el-row>
    <el-row class="shortcuts-body">
      <el-col v-for="(icon, index) in icons" :key="index" :span="4">
        <div class="icon-container">
          <router-link :to="icon.route" class="icon-link">
            <img :src="icon.src" :alt="icon.name" class="icon" />
            <div class="icon-name">{{ icon.name }}</div>
          </router-link>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useSystemStore } from '@/store/SystemManagement/SystemInformation/SystemStore';
import { useI18n } from 'vue-i18n';
import networkSvg from '@/assets/shortcuts/network.svg';
import firmwareSvg from '@/assets/shortcuts/firmware.svg';
import settingSvg from '@/assets/shortcuts/setting.svg';
import timeSvg from '@/assets/shortcuts/time.svg';
import userSvg from '/src/assets/shortcuts/user.svg';
import controlSvg from '/src/assets/shortcuts/control.svg';
const i18n = useI18n();

const systemStore = useSystemStore();

onMounted(() => {
  systemStore.getSystem();
});

const icons = computed(() => [
  {
    src: networkSvg,
    name: i18n.t('appPageTitle.network'),
    route: '/settings/network',
  },
  {
    src: firmwareSvg,
    name: i18n.t('appPageTitle.firmware'),
    route: '/settings/firmware',
  },
  {
    src: settingSvg,
    name: i18n.t('appPageTitle.configureManagement'),
    route: '/settings/configure-management',
  },
  {
    src: timeSvg,
    name: i18n.t('appPageTitle.dateTime'),
    route: '/settings/date-time',
  },
  {
    src: userSvg,
    name: i18n.t('appPageTitle.userManagement'),
    route: '/user-security/user-management',
  },
  {
    src: controlSvg,
    name: i18n.t('appPageTitle.serialOverLan'),
    route: '/services/serial-over-lan',
  },
]);
</script>

<style scoped lang="scss">
.shortcuts-container {
  border-radius: 5px;
  background-color: #fff;
  .el-row {
    padding: 20px 30px 10px;
  }
}
.shortcuts-title {
  font-size: 22px;
}
.icon-container {
  text-align: center;
}
.icon {
  width: 70px;
  height: 70px;
  margin: auto;
}
.icon-name {
  margin: 15px 0px;
  font-size: 16px;
  color: black;
  text-decoration: none;
}
.icon-link {
  display: block;
  cursor: pointer;
  text-decoration: none;
}
</style>
